import { Square } from "../Square";
import $ from "jquery"
import { IViewer } from "../types";
import PageCofig from "./PageConfig"



/**
 * 显示一个小方块到页面上
 */
export class SquarePageViewer implements IViewer {
  private dom?: JQuery<HTMLElement>
  private isRemove: boolean = false // 是否已经从容器中移除

  constructor(private square: Square, private container: JQuery<HTMLElement>){
    
  }
  show() {
    if(this.isRemove){
      return;
    }
    
    if(!this.dom) {
      this.dom = $("<div></div>").css({
        position: "absolute",
        width: PageCofig.SquareSize.width,
        height: PageCofig.SquareSize.height,
        border: "1px solid #ccc",
        boxSizing: "border-box",
      }).appendTo(this.container)
    }
    this.dom.css({
      left: this.square.point.x * PageCofig.SquareSize.width + 'px',
      top: this.square.point.y * PageCofig.SquareSize.height + 'px',
      backgroundColor: this.square.color,
    })
  }
  remove() {
    if(this.dom && !this.isRemove) {
      this.dom.remove()
      this.isRemove = true
    }
  }
}